import { computed, defineComponent, ref } from 'vue';
import Draggable from './Draggable.vue';
import Expandable from './Expandable.vue';
import ExternalLabel from './ExternalLabel.vue';
import ExternalLabelStyled from './ExternalLabelStyled.vue';
import ExternalLabelToggling from './ExternalLabelToggling.vue';
import FabSlots from './FabSlots.vue';
import HideIcon from './HideIcon.vue';
import InternalLabel from './InternalLabel.vue';
import InternalLabelToggling from './InternalLabelToggling.vue';
import NonExpandable from './NonExpandable.vue';
import Padding from './Padding.vue';
import PageSticky from './PageSticky.vue';
import SquareStyle from './SquareStyle.vue';
import VerticalActionsAlignment from './VerticalActionsAlignment.vue';
import Demo from './Demo.vue';

export default defineComponent({
  name: 'App',
  props: {},
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    expose({});

    return () => {
      return (
        <div class='block'>
        <div class='block-'>
            <h5 class='title'>Demo</h5>
            <Demo />
          </div>
          <div class='block-'>
            <h5 class='title'>Draggable</h5>
            <Draggable />
          </div>
          <div class='block-'>
            <h5 class='title'>Expandable</h5>
            <Expandable />
          </div>
          <div class='block-'>
            <h5 class='title'>ExternalLabel</h5>
            <ExternalLabel />
          </div>
          <div class='block-'>
            <h5 class='title'>ExternalLabelStyled</h5>
            <ExternalLabelStyled />
          </div>
          <div class='block-'>
            <h5 class='title'>ExternalLabelToggling</h5>
            <ExternalLabelToggling />
          </div>
          <div class='block-'>
            <h5 class='title'>FabSlots</h5>
            <FabSlots />
          </div>
          <div class='block-'>
            <h5 class='title'>HideIcon</h5>
            <HideIcon />
          </div>
          <div class='block-'>
            <h5 class='title'>InternalLabel</h5>
            <InternalLabel />
          </div>
          <div class='block-'>
            <h5 class='title'>InternalLabelToggling</h5>
            <InternalLabelToggling />
          </div>
          <div class='block-'>
            <h5 class='title'>NonExpandable</h5>
            <NonExpandable />
          </div>
          <div class='block-'>
            <h5 class='title'>Padding</h5>
            <Padding />
          </div>
          <div class='block-'>
            <h5 class='title'>PageSticky</h5>
            <PageSticky />
          </div>
          <div class='block-'>
            <h5 class='title'>SquareStyle</h5>
            <SquareStyle />
          </div>
          <div class='block-'>
            <h5 class='title'>VerticalActionsAlignment</h5>
            <VerticalActionsAlignment />
          </div>
        </div>
      );
    };
  },
});
